<template>
  <div>
    <h4>查询书籍</h4>
    <div>
      <span>书名:</span>
      <input type="text" placeholder="书名" v-model="bname" />
      <button @click="findFn">点击查询</button>
    </div>
    <ul>
      <li v-for="obj in list" :key="obj.id">
        <span>书名:{{ obj.bookname }}</span>
        <span>作者:{{ obj.author }}</span>
        <span>出版社:{{ obj.publister }}</span>
      </li>
    </ul>
    <p v-if="isShow && list.length == 0">没有这本书籍</p>
    <hr />

    <h4>添加图书</h4>
    <div>
      <span>书名:</span>
      <input type="text" v-model="book.bookname" />
      <br />
      <span>作者:</span>
      <input type="text" v-model="book.author" />
      <span>出版社:</span>
      <input type="text" v-model="book.publisher" />
    </div>
    <button @click="addFn">添加书籍</button>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://123.57.109.30:3006/api/getbooks";
export default {
  data() {
    return {
      bname: "",
      isShow: false,
      list: [],
      book: {
        bookname: "",
        author: "",
        publisher: "",
      },
    };
  },
  methods: {
    findFn() {
      this.isShow = true;
      axios({
        url: "/api/getbooks",
        method: "GET",
        params: {
          bookname: this.bname,
        },
      }).then((res) => {
        // console.log(res.data.data);
        this.list = res.data.data;
      });
    },
    addFn() {
      axios({
        url: "/api/addbook",
        method: "POST",
        data: {
          ...this.book,
          appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
        },
      }).then(() => {
        alert("成功");
      });
    },
  },
  created() {
    // let promiseObj = axios({
    //   url: "http://123.57.109.30:3006/api/getbooks",
    //   method: "GET",
    // });
    // promiseObj.then((res) => {
    //   console.log(res);
    // });
  },
};
</script>

<style>
</style>